{{ csrf_field() }}
<div class="box-body">
    <div class="form-group">
        <label for="name">角色标识</label>
        <input type="text" name="name" value="{{ $role->name or old('name') }}" class="form-control" id="name" placeholder="角色标识">
    </div>
    <div class="form-group">
        <label for="cn_name">角色描述</label>
        <input type="text" name="cn_name" value="{{ $role->cn_name or old('cn_name') }}" class="form-control" id="cn_name" placeholder="角色名">
    </div>

    <div class="form-group">
        <label for="permissions">权限列表</label>
        <div class="row">
            @if(!isset($permissionGroup))
                @foreach($permissionLevel1 as $permissiontr)
                    <div class="col-xs-4" >
                        <div class="permission" id="permission-{{ $permissiontr->name }}">
                            <label class="permission-title">{{ $permissiontr->cn_name }}<span class="pull-right"><input type="checkbox" class="flat-red" value="{{ $permissiontr->name }}" data-level="{{ $permissiontr->level }}" data-permission-level="one" data-pid="{{ $permissiontr->pid }}" data-show=0 data-id="{{ $permissiontr->id }}" name="permissions[]"></span> </label>
                        </div>
                    </div>
                @endforeach
            @else
                @include('permission._edit_block')
            @endif
        </div>
    </div>
</div>
<div class="box-footer">
    <button type="submit" class="btn btn-primary">保存</button>
    <button type="button" onclick="javascript:window.history.back()" class="btn btn-default">返回</button>
</div>

@section('Style')
    @if(!isset($permissionGroup))
    <style type="text/css">
        .checkbox + .checkbox {margin-top:0px;}
        .permission { margin-bottom: 5px;background-color: #ecf0f5;}
        .permission-title {background-color:#3c8dbc;color:#fff;padding: 5px; width:100%; margin-bottom: 0px;}
        .permission-level-2 {background-color:#fff;}
        .permission-level-2-title {background-color:#ebeaeb;padding: 5px; width:100%;}
        .permission-level-3 {background-color:#ebeaeb;}
        .build {border-bottom:solid 1px #080808; }
        .build > label {border-bottom:solid 1px #fff;margin-bottom:0px; }
        .build  .form-group {margin-bottom:0px; }
        .checkbox {padding: 5px;margin: 0px;}
    </style>
    @endif
@endsection

@section('JavascriptScript')

    @if(!isset($permissionGroup))

    $('input[data-permission-level="one"]').on('change',function(){
        var theId = $(this).data('id');
        var thePid = $(this).data('pid');
        var theVal = $(this).val();

        if($(this).prop('checked') && $(this).data('show') == 0){
            $(this).data('show',1)
            $.get("/permission/child/"+theId,'',function(data){
                var tmpl ='<div class="permission-level-2">';

                $.each(data,function(n,k){
                    tmpl += '<div id="permission-'+ k.name +'" class="build"><label class="permission-level-2-title">'+ k.cn_name +'<span class="pull-right"><input type="checkbox" data-permission-level="two" value="'+ k.name +'" data-level="'+ k.level +'" data-show=0 data-pid="'+ k.pid +'" data-id="'+ k.id +'" class="flat-red" name="permissions[]"></span> </label></div>';
                });

                tmpl += '</div>';

                $("#permission-"+theVal).append(tmpl);

                $('input[data-permission-level="two"]').on('change',function(){
                    //console.log($('input[data-permission-level="two"]'))
                    var the2Id = $(this).data('id');
                    var the2Pid = $(this).data('pid');
                    var the2Val = $(this).val();
                    if($(this).prop('checked') && $(this).data('show') == 0){
                        $(this).data('show',1)
                        $.get("/permission/child/"+the2Id,'',function(data){

                            var tmpl = '<div class="permission-level-3 form-group clearfix">';

                            $.each(data,function(n,k){
                                tmpl += '<div class="checkbox pull-left"><label><input type="checkbox" data-permission-level="three" data-pid="'+ k.pid +'" data-id="'+ k.id +'" data-level="'+ k.level +'" class="flat-red" name="permissions[]" value="'+ k.name +'">'+ k.cn_name +'</label></div>';
                            });

                            tmpl += '</div>';

                            $("#permission-"+the2Val).append(tmpl);

                            $('input[name="permissions[]"]').on('change',function(){
                                var changeId = $(this).data('id');
                                var changePid = $(this).data('pid');
                                var theLevel = $(this).data('level');
                                if(changePid != 0){
                                    var changePPid = $('input[data-id='+ changePid +']').data('pid');
                                }

                                if($(this).prop('checked')){
                                    if(changePPid != undefined){
                                        $('input[data-id='+ changePPid +']').prop('checked',true)
                                    }
                                    if(changePid != 0){
                                        $('input[data-id='+ changePid +']').prop('checked',true)
                                    }
                                }else{
                                    var pplen = $('input[data-pid='+ changePPid +']').filter('input:checkbox:checked').length;
                                    var plen = $('input[data-pid='+ changePid +']').filter('input:checkbox:checked').length;
                                    if(theLevel > 2){
                                        if(plen == 0){
                                            $('input[data-id='+ changePid +']').prop('checked',false);
                                            if(pplen == 1 ){
                                                $('input[data-id='+ changePPid +']').prop('checked',false);
                                            }
                                        }

                                    }
                                    if(theLevel == 2){

                                        if(plen == 0){
                                            $('input[data-id='+ changePid +']').prop('checked',false)
                                        }

                                        $('input[data-pid='+ changeId +']').prop('checked',false);
                                    }

                                    if(theLevel < 2){
                                        $('input[data-level="2"]').prop('checked',false);
                                        $('input[data-level="3"]').prop('checked',false);
                                    }

                                }
                            });

                        },'json');
                    }
                });

            },'json');
        }

    });
    @endif
@endsection